<template>
  <div class="dataSource-box">
    <el-card v-loading="loading" class="custom-card">
      <div class="card-header">
        <span>数据源</span>
      </div>
      <el-form :model="formSetting" :rules="rules" ref="formRef1">
        <el-form-item label="数据库名称" :label-width="formLabelWidth" prop="DatabaseName">
          <el-input v-model="formSetting.DatabaseName" size="large" clearable />
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" prop="Description">
          <el-input v-model="formSetting.Description" size="large" clearable />
        </el-form-item>
        <el-form-item label="数据库类型" prop="OrmType" :label-width="formLabelWidth" required>
          <el-radio-group v-model="formSetting.OrmType">
            <el-radio
              v-for="item in radioList"
              :key="item.name"
              :label="item.name"
              @change="updateDemoDns(item)">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="链接地址" :label-width="formLabelWidth" prop="Dns">
          <el-input v-model="formSetting.Dns" size="large" clearable />
        </el-form-item>
        <el-form-item label="参考值" :label-width="formLabelWidth">
          <span>{{ formSetting.DemoDns }}</span>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <el-button size="large" @click="defaultClick">设为默认值</el-button>
        <el-button size="large" type="primary" @click="saveClick">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import dataSource from '@/api/dataSource';
const hasToken = <string>localStorage.getItem('accessToken');
import { ElMessage } from 'element-plus';

const loading = ref(false);
const formLabelWidth = '110px';

// 默认数据
const alldata = {
  DatabaseName: '',
  Description: '',
  OrmType: '',
  Dns: '',
  DemoDns: ''
};

interface RadioItem {
  name: string;
  description: string;
}

const radioList = ref<RadioItem[]>([]);

// 定义类型
interface DefineSetting {
  DatabaseName?: string | null;
  Description?: string | null;
  OrmType?: string | null;
  Dns?: string | null;
  DemoDns?: string | null;
}

// 默认参数
const formSetting = ref<DefineSetting>({
  DatabaseName: '',
  Description: '',
  OrmType: '',
  Dns: '',
  DemoDns: ''
});

const rules = {
  DatabaseName: [
    { required: true, message: '请输入数据库名称', trigger: 'blur' }
  ],
  Description: [
    { required: true, message: '请输入描述', trigger: 'blur' }
  ],
  OrmType: [
    { required: true, message: '请输入数据库类型', trigger: 'blur' }
  ],
  Dns: [
    { required: true, message: '请输入链接地址', trigger: 'blur' }
  ],
};

// 设为默认值
const defaultClick = () => {
  formSetting.value = { ...alldata };
  if (formSetting.value.OrmType) {
    const selectedDb = radioList.value.find(item => item.name === formSetting.value.OrmType);
    if (selectedDb) {
      formSetting.value.DemoDns = selectedDb.description;
    }
  }
};

// 监听 OrmType 的变化
watch(() => formSetting.value.OrmType, (newVal) => {
  if (newVal) {
    updateDemoDnsByType(newVal);
  }
});

// 根据类型更新 DemoDns
const updateDemoDnsByType = (type: string) => {
  const selectedDb = radioList.value.find(item => item.name === type);
  if (selectedDb) {
    formSetting.value.DemoDns = selectedDb.description;
  }
};

// 根据选择的数据库类型更新 DemoDns
const updateDemoDns = (item: RadioItem) => {
  formSetting.value.DemoDns = item.description;
};

// 保存
const saveClick = () => {
  dataSource.saveData(hasToken, formSetting.value).then(() => {
    ElMessage.success('保存成功');
    getData();
  }).finally(() => {
    loading.value = false; // 结束加载
  });
};

  onMounted(() => {
    getDataBaseList();
    getData();
  });

  const getData = () => {
    loading.value = true; // 开始加载
    dataSource.getDatas(hasToken).then((res: any) => {
      loading.value = false;
      Object.assign(alldata, res.data);
      formSetting.value = { ...res.data };

      if (formSetting.value.OrmType) {
        const selectedDb = radioList.value.find(item => item.name === formSetting.value.OrmType);
        if (selectedDb) {
          formSetting.value.DemoDns = selectedDb.description;
        }
      }
    }).finally(() => {
      loading.value = false; // 结束加载
    });
  };

  const getDataBaseList = () => {
    dataSource.getDatabaseList(hasToken).then((res: any) => {
      radioList.value = res.data;
      if (radioList.value.length > 0) {
        formSetting.value.OrmType = radioList.value[0].name; // 默认选中第一个数据库类型
        formSetting.value.DemoDns = radioList.value[0].description; // 设置参考值
      }
    });
  };
</script>
<style scoped lang="scss">
.dataSource-box {
  width: 100%;
  // height: 100%;
  display: flex;
  justify-content: center;
  // align-items: center;
  background: linear-gradient(135deg, #f5f5f5, #ebeef5); /* 渐变背景 */
  padding: 80px 20px 20px 20px; /* 增加内边距 */
}

.custom-card {
  width: 90%;
  // height: 70%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 12px; /* 圆角 */
}

.card-header {
  text-align: center;
  font-size: 25px;
  margin-bottom: 30px;
  color: #333; /* 深色文字 */
}

.btn-box {
  display: flex;
  justify-content: end;
  margin-top: 20px; /* 增加顶部间距 */
}

.el-radio__label {
  text-transform: none;
}

/* 可以添加一些图标或辅助信息 */
.icon-box {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
  color: #999;
}
</style>